import * as React from 'react'
import { NavBar, Icon, Item } from 'components'
import { formatPriceStr } from '../../methods'
import './index.less'
import { post } from '../../../../utils'

export default class DebtManagement extends React.Component<any, any> {

    public componentDidMount () {
        this.getData()
    }

    public render(): JSX.Element {
        const { userDebt } = this.props
        return (
            <div className="debtManagement">
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>债务管理</div>}
                    fixed={true}
                />
                <div className="debtManagement_top">
                    <img className="debtManagement_top_img" src={require('../../../../assets/zw_bg.png')} />
                    <div className="debtManagement_top_content">
                        <div className="debtManagement_top_content_info">剩余债务数</div>
                        <div className="debtManagement_top_content_value">
                            <div className="debtManagement_top_text DINPro">{userDebt.residue_q && formatPriceStr((userDebt.residue_q).toString())}</div>
                            <div className="debtManagement_top_authentication">
                                <Icon type="protect_tick" />
                                    已实名
                                <Icon type="arrow_right" />
                            </div>
                        </div>
                        <div className="debtManagement_top_hdInfo">
                            <div className="debtManagement_top_hdInfo_all">
                                <p>总债务数</p>
                                <p className="DINPro">{userDebt.all_price && formatPriceStr(userDebt.all_price)}</p>
                            </div>
                            <div className="debtManagement_top_hdInfo_receive">
                                <p>已还清债务数</p>
                                <p className="DINPro">{userDebt.sum_price && formatPriceStr(userDebt.sum_price.toString())}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="debtManagement_operation">
                    <div>
                        <div className="debtManagement_operation_item" onClick={() => {this.goToUrl('/My/fillInSignature')}}>
                            <Icon type="seal" />
                            <div>签章信息</div>
                        </div>
                    </div>
                    <div>
                        <div className="debtManagement_operation_item" onClick={() => {this.goToUrl('/My/debtReceiveHD')}}>
                            <Icon type="creditor" />
                            <div>债权人信息</div>
                        </div>
                    </div>
                </div>
                <Item 
                    onPress={() => {this.goToUrl('/My/debtExChangeList')}}
                    className="debtManagement_item" 
                    title={<div className="debtManagement_item_title"><Icon type="order_hd" />债务兑换记录</div>} 
                    value={<div className="debtManagement_item_value"><Icon type="arrow_right" /></div>} 
                />
                <Item 
                    onPress={() => {this.goToUrl('/My/debtExChangeStatistics')}}
                    className="debtManagement_item" 
                    title={<div className="debtManagement_item_title"><Icon type="statistics_circle" style={{color: '#00c2f2'}} />债务统计</div>} 
                    value={<div className="debtManagement_item_value"><Icon type="arrow_right" /></div>} 
                />
            </div>
        )
    }
    private getData = () => {
        const { userInfo, SET_MYUTILS_DEBT, SET_MYUTILS_DEPT_ZWMANAGEID } = this.props
        post('usersapi/userZwManage', {
            userId: userInfo.id
        }).then((data: any) => {
            SET_MYUTILS_DEBT(data)
            SET_MYUTILS_DEPT_ZWMANAGEID(data.id)
        })
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
}